<template lang="pug">
  v-container
    v-card
      v-toolbar(color="purple darken-4" dark dense)
        v-toolbar-title 基本信息
        v-spacer
        v-toolbar-items
          v-btn(text @click="$emit('toggleModel', 'edit')") 编辑
      v-form(ref="form")
        v-container(grid-list-lg)
          v-layout(wrap)
            v-flex(v-for="f in fields" xs12 md4)
              h4.body-2 {{ label(f) }}
              p.body-1.text--primary {{ value(f) }}
              
    v-card.mt-4
      v-tabs(center-active v-model="activeTab" background-color="purple darken-4" dark)
        v-tab(v-for="tab in tabs" :key="tab['id']") {{ tab.label }}
        v-tab-item(v-for="tab in tabs" :key="tab['id']")
          component(:is="tab.component" :asset="asset")

    AttachmentSection.mt-4(ref="attachments", :id="asset.id" :type="attachableType")
</template>

<script lang="ts">
  import Vue from 'vue'
  import AssetStockMeta from './asset_stock_meta'
  import {get, isObject, isEmpty, isString} from 'lodash'
  import AssetStockChangeHistoryDataTable from './asset_stock_change_history_data_table'
  import {AttachableType} from '@/store/modules/types/Attachment'
  import AttachmentSection from '@/components/shared/AttachmentSectionInDetailsView.vue'
  import {AssetTypes} from '@/store/modules/types/Bundle'

  var MyComponent = Vue.extend({
    template: '<p>A custom component!</p>'
  })
  export default Vue.extend({
    props: ['asset'],
    methods: {
      ...AssetStockMeta,
      edit(){},
      value(key: string): string {
        let _v = this.asset[key]
        if (isObject(_v)) {
          _v = get(_v, 'name', 'N/A')
        }
        _v = null === _v ? 'N/A' : _v
        return _v
      }
    },
    components: {AssetStockChangeHistoryDataTable, MyComponent, AttachmentSection},
    data() {
      return {
        attachableType: AttachableType.AssetStock,
        activeTab: 0,
        tabs: [
          {id: "AssetStockChangeHistory", label: "变更历史", component: AssetStockChangeHistoryDataTable},
          {id: "Order", label: "订单信息", component: MyComponent},
        ],
        fields: [
          'name',
          'product_model_number',
          'description',
          'init_quantity',
          'available_quantity',
          'total_quantity',
          'checkout_quantity',
          'marking_price_per_unit',
          'bid_price_per_unit',
          'created_at',
          'affiliation',
          'category',
          'sub_category',
          'brand',
          'keeper',
          'location',
          'vendor'
        ]
      }
    }
  })
</script>
